<template>
  <div class="index-box" >
    <div class="mod_default_box update__box">
      <div class="mod_default_hd data-overview__header">
          实时概况
      </div>
      <div class="data_overview_list">
        <div class="data_overview_list_left right-border" >
          <div class="data_overview_item">
            <div class="data_overview_title">今日新增用户数</div>
            <div class="data_overview_desc"><countTo  :start-val="0" :end-val="turnNumber(survey.currNewUser)" :duration="duration"></countTo></div>
          </div>
          <div class="data_overview_item">
            <div class="data_overview_title">累计用户数</div>
            <div class="data_overview_desc"><countTo  :start-val="0" :end-val="turnNumber(survey.totalUserCount)" :duration="duration"></countTo></div>
          </div>
          <div class="data_overview_item">
            <div class="data_overview_title">今日新增商户数</div>
            <div class="data_overview_desc"><countTo  :start-val="0" :end-val="turnNumber(survey.currNewStore)" :duration="duration"></countTo></div>
          </div>
          <div class="data_overview_item">
            <div class="data_overview_title">累计商户数</div>
            <div class="data_overview_desc"><countTo  :start-val="0" :end-val="turnNumber(survey.totalStoreCount)" :duration="duration"></countTo></div>
          </div>
        </div>
         <div class="data_overview_list_right">
           <div class="data_overview_item">
             <div class="data_overview_title">今日支付金额</div>
             <div class="data_overview_desc"><countTo  :start-val="0" :end-val="turnNumber(survey.currPayAmount)" :duration="duration" :decimals="2"></countTo>元</div>
           </div>
           <div class="data_overview_item">
             <div class="data_overview_title">今日订单数</div>
             <div class="data_overview_desc"><countTo  :start-val="0" :end-val="turnNumber(survey.currOrderCount)" :duration="duration"></countTo></div>
           </div>
           <div class="data_overview_item">
             <div class="data_overview_title">月订单数</div>
             <div class="data_overview_desc"><countTo  :start-val="0" :end-val="turnNumber(survey.monthOrderCount)" :duration="duration"></countTo></div>
           </div>
           <div class="data_overview_item">
             <div class="data_overview_title">客单价</div>
             <div class="data_overview_desc"><countTo  :start-val="0" :end-val="turnNumber(survey.unitPrice)" :duration="duration" :decimals="2"></countTo>元</div>
           </div>
           <div class="data_overview_item">
             <div class="data_overview_title">累计交易金额</div>
             <div class="data_overview_desc"><countTo  :start-val="0" :end-val="turnNumber(survey.totalTransactionAmount)" :duration="duration" :decimals="2"></countTo>元</div>
           </div>
           <div class="data_overview_item">
             <div class="data_overview_title">用户可提现总金额</div>
             <div class="data_overview_desc"><countTo  :start-val="0" :end-val="turnNumber(survey.userCashAmount)" :duration="duration" :decimals="2"></countTo>元</div>
           </div>
         </div>
      </div>
    </div>

    <div class="mod_default_box update__box">
      <div class="mod_default_hd data-overview__header">
          订单概览
      </div>
      <div class="data_overview_list">
        <div class="data_overview_item flex1" @click="goRouter('/order/goodPresent')">
          <div class="data_overview_title">待付款</div>
          <div class="data_overview_desc"><countTo  :start-val="0" :end-val="turnNumber(orderList.waitPay)" :duration="duration" ></countTo></div>
        </div>
        <div class="data_overview_item flex1" @click="goRouter('/order/goodPresent')">
          <div class="data_overview_title">待发货</div>
          <div class="data_overview_desc"><countTo  :start-val="0" :end-val="turnNumber(orderList.waitDeliver)" :duration="duration" ></countTo></div>
        </div>
        <div class="data_overview_item flex1" @click="goRouter('/order/goodPresent')">
          <div class="data_overview_title">待售后</div>
          <div class="data_overview_desc"><countTo  :start-val="0" :end-val="turnNumber(orderList.waitAfterSale)" :duration="duration" ></countTo></div>
        </div>
        <div class="data_overview_item flex1" @click="goRouter('/audit/nameAttestationAudit')">
          <div class="data_overview_title">待审核</div>
          <div class="data_overview_desc"><countTo  :start-val="0" :end-val="turnNumber(orderList.waitAudit)" :duration="duration" ></countTo></div>
        </div>
        <div class="data_overview_item flex1" @click="goRouter('/order/goodPresent')">
          <div class="data_overview_title">待退款</div>
          <div class="data_overview_desc"><countTo  :start-val="0" :end-val="turnNumber(orderList.waitRefund)" :duration="duration" ></countTo></div>
        </div>
        <div class="data_overview_item flex1" @click="goRouter('/msg/feedback')">
          <div class="data_overview_title">用户反馈</div>
          <div class="data_overview_desc"><countTo  :start-val="0" :end-val="turnNumber(orderList.feedbackCount)" :duration="duration" ></countTo></div>
        </div>
      </div>
    </div>

    <div class="table-box">
      <div class="hot-sell mod_default_box flex1">
        <div class="data-overview__header">
          热销商品TOP 50
        </div>
        <div class="hotSellTableData">
          <el-table :data="hotSellTableData" border style="width: 100%" :height="350">
            <el-table-column type="index"  label="编号" width="60" align="center"></el-table-column>
            <el-table-column prop="goodsName" label="商品名称" ></el-table-column>
            <el-table-column label="商品图片" align="center" width="100">
              <template #default="scope">
                 <el-image :src="scope.row.goodsImage" fit="fill" v-image-preview="scope.row.goodsImage" class="img"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="orderTypeName" label="商品类型" align="center" width="80"></el-table-column>
            <el-table-column prop="categoryName" label="商品类目" align="center" width="100"></el-table-column>
            <el-table-column prop="orderTime" label="订单日期" align="center" width="120"></el-table-column>
            <el-table-column prop="soldNum" label="累计销售" align="center" width="80"></el-table-column>
          </el-table>
        </div>
      </div>
      <div style="width: 16px;margin: 0 8px;"></div>
      <div class="active-store mod_default_box flex1">
        <div class="data-overview__header">
          活跃商家TOP 50
        </div>
        <div class="activeStoreTableData">
          <el-table :data="activeStoreTableData" border style="width: 100%" :height="350">
            <el-table-column type="index"  label="编号" width="60" align="center" ></el-table-column>
            <el-table-column prop="storeName" label="商家名称" width="180"></el-table-column>
            <el-table-column prop="legalPerson" label="法人" align="center" width="80"></el-table-column>
            <el-table-column prop="activeTime" label="最后活跃时间" align="center" width="120"></el-table-column>
            <el-table-column prop="address" label="店铺地址" ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <div class="table-box" style="margin-top:15px">
        <div class="active-store mod_default_box" style="width: 100%;">
          <div class="data-overview__header">
            积分活跃用户TOP 100
          </div>
          <div class="activeUserTableData">
            <el-table :data="activeUserTableData" border style="width: 100%" :height="350" v-loading="activeUserLoading">
              <el-table-column prop="date" type="index"  label="编号" width="60" align="center"></el-table-column>
              <el-table-column prop="nickname" label="用户名称" ></el-table-column>
              <el-table-column prop="telephone" label="手机号" align="center"></el-table-column>
              <el-table-column prop="parentName" label="推荐人姓名" align="center"></el-table-column>
              <el-table-column prop="pointsTotal" label="总积分" align="center"></el-table-column>
              <el-table-column prop="activeTime" label="最后获取积分时间" align="center"></el-table-column>
              <el-table-column prop="joinTime" label="加入时间" align="center"></el-table-column>
            </el-table>
          </div>
        </div>

    </div>
  </div>
</template>

<script>
import { getIndexStatistics, activeMerchants, pointsActiveUsers, bestSellers, getIndexOrderStatistics, getHouNiaoGoodsCategory} from '@/api/getData';
import countTo from 'vue-count-to';
export default {
  components: { countTo },
  data () {
    return {
      loading:true,
      activeUserLoading:true,
      duration:3000,//数字动画时长
      hotSellTableData:[],//热销商品表格数据
      activeStoreTableData:[],// 活跃商家表格数据
      activeUserTableData:[],//积分活跃用户表格数据

      orderList:{},//订单概览
      survey:{},//实时概况数据
    }
  },
  mounted () {
    //this.dataInfo();
  },
  methods: {
		dataInfo(){
      getIndexStatistics().then(result=>{//实时概况数据
        if (result.code == 200) {
          this.survey = result.data;
          console.log( this.survey)
        }else{
          this.$message.error(result.msg);
        }
      });

      activeMerchants().then(result=>{//活跃商家TOP 50
        if (result.code == 200) {
          this.activeStoreTableData = result.data;
        }else{
          this.$message.error(result.msg);
        }
      });

      getIndexOrderStatistics().then(result=>{//订单概览
        if (result.code == 200) {
          this.orderList = result.data;
        }else{
          this.$message.error(result.msg);
        }
      });

      this.activeUserLoading = true;
      pointsActiveUsers().then(result=>{//积分活跃用户TOP 100
        if (result.code == 200) {
          this.activeUserTableData = result.data;
          this.activeUserLoading = false;
        }else{
          this.$message.error(result.msg);
          this.activeUserLoading = false;
        }
      });

      bestSellers().then(result=>{//热销商品TOP 50
        if (result.code == 200) {
          this.hotSellTableData = result.data;
        }else{
          this.$message.error(result.msg);
        }
      });
		},
    goRouter(link){
      this.$router.push({path: link});
    },
    turnNumber(str){
      return Number(str);
    }
  }

}
</script>

<style lang="scss" scoped>
  .index-box{
    overflow-y:auto;
    overflow-x:hidden;
  }
  .table-box{
    display: flex;
    width: 100%;
  }
  .img{
    height:50px;
  }
  .el-main .index-box{
    background: #f0f2f5;
    padding:0px;
  }
  .right-border{
    border-right: 1px solid #e7e7eb;
  }
  .mod_default_box {
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 1px 2px rgba(150, 150, 150, 0.3);
      padding: 30px 30px;
  }
  .update__box {
      margin-bottom: 15px;
      padding: 40px;
  }
  .data_overview_item{
    padding:15px 0;
    .data_overview_title{
      color: #9a9a9a;
      font-weight: 400;
      text-align: center;
      font-size: 14px;
    }
    .data_overview_desc{
      padding-top: 13px;
      font-size: 24px;
       text-align: center;
       color: #353535;
    }
  }
  .data-overview__header{
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 15px;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 0;
    padding: 0;
    color: #353535;
    margin-bottom: 30px;
  }
  .data_overview_list>.data_overview_item{
    cursor: pointer;
  }
  .data_overview_list{
    display: flex;
    .data_overview_list_left{
      flex:2;
      display: flex;
      flex-wrap: wrap;
      .data_overview_item{
        width:50%;
      }
    }
    .data_overview_list_right{
      flex:3;
      display: flex;
      flex-wrap: wrap;
      .data_overview_item{
        width: 33.3%;
      }
    }
  }
</style>
